<template>
    <div class="page h100">
        <div class="dl">
            <div class="dt">
                <span class="icon-bar mr8"></span>
                <span class="f16 fam ml5">扣/加分统计</span>
            </div>
            <div class="dd" id="scroe-echarts">
                <v-chart
                    v-if="isShowScoreStatistics"
                    :option="scoreStatisticsInitOpt"
                    class="echarts"
                    ref="scoreStatisticsChart"
                ></v-chart>
            </div>
        </div>
        <div class="dl">
            <div class="dt">
                <span class="icon-bar mr5"></span>
                <span v-if="$store.state.userInfo.roleCode === 2" class="f16 fam ml5">县（市、区）申报进度</span>
                <span v-if="$store.state.userInfo.roleCode > 2" class="f16 fam ml5">
                    市（州）、县（市、区）申报进度
                </span>
            </div>
            <div class="dd">
                <table class="mt20">
                    <thead>
                        <tr>
                            <th v-for="th in ths" :key="th[0]">
                                {{ th[0] }}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(tbr, index) in tbrs" :key="'tbr' + index">
                            <td v-for="(th, i) in ths" :key="'td' + i">{{ tbr[th[1]] || '-' }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
import { jjScoreStatisticsGet, scoreStatisticsGet } from '../../common/api/setting'

export default {
    name: 'pro',
    data() {
        return {
            isShowScoreStatistics: false,
            //不相信后端的排序，写了字段对照
            ths: [
                ['复核中', 'fhz'],
                ['复核退回', 'fhth'],
                ['复核终止', 'fhzz'],
                ['综合评议中', 'zhpyz'],
                ['综合评议退回', 'zhpyth'],
                ['综合评议终止', 'zhpyzz'],
                ['综合评议完成', 'zhpywc'],
                ['命名授牌完成', 'mmspwc'],
                ['撤销命名、摘牌', 'cxmmzp'],
            ],
            scoreStatisticsInitOpt: {
                grid: { left: 50, right: 20 },
                color: ['#0062FF'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                    formatter: function (params) {
                        var list = [`<b>${params[0].name}</b>`, ...params[0].data?.areaList]

                        return list.join('<br/>')
                    },
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        color: '#243144',
                        fontWeight: 'bold',
                        overflow: 'break',
                        interval: 0,
                    },
                    axisTick: false,
                    axisLine: false,
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        color: '#243144',
                        fontWeight: 'bold',
                    },
                },
                series: [
                    {
                        type: 'bar',
                        barWidth: 40,
                        itemStyle: {
                            normal: {
                                barBorderRadius: [5, 5, 0, 0],
                            },
                        },
                    },
                ],
            },
            tbrs: [],
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.isShowScoreStatistics = true
            this.initScoreStatistics()
            this.initProcessTable()
        })

        this._resizeHandler = () => {
            this.$refs.scoreStatisticsChart.resize()
        }

        window.addEventListener('resize', this._resizeHandler)
    },
    unmounted() {
        window.removeEventListener('resize', this._resizeHandler)
    },
    methods: {
        async initScoreStatistics() {
            {
                let res = await jjScoreStatisticsGet()
                let xAxisData = res.data.map(n => n.name)
                let seriesData = res.data.map(n => {
                    return {
                        value: n.totalCount,
                        areaList: n.areaList || [],
                    }
                })
                if (res.code == 200) {
                    this.scoreStatisticsInitOpt = {
                        xAxis: {
                            data: xAxisData,
                        },
                        series: {
                            data: seriesData,
                        },
                    }
                }
            }
        },
        async initProcessTable() {
            let res = await scoreStatisticsGet()

            if (res.code == 200) {
                this.tbrs = res.data
            }
        },
    },
}
</script>

<style scoped lang="scss">
.page {
    height: 100%;
    width: 100%;
    overflow-y: auto;

    > .dl {
        width: 100%;
        background-color: white;
        border-radius: 25px;
        padding: 25px;
        min-height: 400px;
        display: flex;
        flex-direction: column;

        &:first-child {
            margin-bottom: 20px;
        }

        &:last-child {
            overflow-y: auto;
        }

        .dt {
            align-items: center;
        }

        .dd {
            width: 100%;
            flex: 1;
            display: flex;
            flex-direction: column;

            table {
                width: 100%;

                thead {
                    tr {
                        background-color: #f2f4f7;
                    }
                }

                tr {
                    th,
                    td {
                        padding: 16px;
                        text-align: center;
                    }
                }

                tbody {
                    tr {
                        border-bottom: 1px solid #e6e8ed;
                    }
                }
            }
        }

        .icon-bar {
            background-color: #0062ff;
            height: 20px;
            width: 4px;
            display: inline-block;
            margin-right: 10px;
        }

        .dt-title {
            font-size: 16px;
            font-family: AlibabaPuHuiTiB;
            font-weight: bold;
            color: #243144;
            line-height: 32px;
        }

        .echarts {
            flex: 1;
            width: 100%;
        }
    }
}
</style>
